<template>
  <div class="pesonal-info">
    <image
      class="personal-info-logo"
      src="@\static\images\home\schoolLogo.png"
      mode="scaleToFill"
    />
    <div class="personal-info-text">
      <p class="personal-info-text-left">
        {{ user.name }}
      </p>
      <p class="personal-info-text-right">
        {{ user.sex }}|{{ user.age }}岁
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';

const user = reactive({ name: '熊*', sex: '男', age: 22 });
</script>

<style scoped>
.pesonal-info{
  padding: 20px;
  width: 80%;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 0 10px;
}

.personal-info-logo{
  width: 60%;
  max-width: 100%; /* Make sure image scales within its container */
}

.personal-info-text{
  display: flex;
  justify-content: space-between; /* 项目分布在容器两侧 */
  width: 100%;
}

.personal-info-text-left{
  font-size: 30px;
  font-family: "楷体", KaiTi, serif;
  font-weight: bold;
}

.personal-info-text-right{
  font-size: 25px;
  font-family: "楷体", KaiTi, serif;
}
</style>
